<template>
  <view class="p-20rpx bg-[#F2F2F6]">
    <!-- 总计 -->
    <view class="bg-[#fff] mt-12rpx pb-12rpx">
      <view>
        <!-- 图表 -->
        <view class="relative w-full h-300rpx">
          <qiun-data-charts
            v-if="state.chartData"
            type="arcbar"
            :opts="state.opts"
            :chartData="state.chartData"
            :animation="state.animation"
          />
          <view v-if="state.chartData" class="legend">
            <block v-for="(item, index) in state.legendData" :key="index">
              <view class="legend-item">
                {{ item.name }}
              </view>
            </block>
          </view>
          <view v-else class="flex-center">
            <wd-status-tip :image="emptyImage" tip="暂无数据" />
          </view>
        </view>
        <!-- 已完成 -->
        <view class="completed">
          <view class="text-[#3D3D3D] fw-700 text-28rpx">已完成</view>
          <view class="flex items-center justify-between mt-12rpx">
            <view class="text-[#858585] text-24rpx">
              作业完成量：
              <text class="text-[#3670F7]">{{ finish }}</text>
            </view>
            <view class="text-[#858585] text-24rpx">
              占比：
              <text class="text-[#3670F7]">{{ finishRate }}%</text>
            </view>
          </view>
          <wd-progress :percentage="finishRate" hide-text color="#3670F7"></wd-progress>
        </view>
        <!-- 未完成 -->
        <view class="unfinished">
          <view class="text-[#3D3D3D] fw-700 text-28rpx">未完成</view>
          <view class="flex items-center justify-between mt-12rpx">
            <view class="text-[#858585] text-24rpx">
              作业完成量：
              <text class="text-[#3670F7]">{{ unFinish }}</text>
            </view>
            <view class="text-[#858585] text-24rpx">
              占比：
              <text class="text-[#3670F7]">{{ unFinishRate }}%</text>
            </view>
          </view>
          <wd-progress :percentage="unFinishRate" hide-text color="#D8D8D8"></wd-progress>
        </view>
      </view>
    </view>
    <!-- 各班 -->
    <wd-collapse v-model="state.collapseValue" accordion class="mt-20rpx">
      <wd-collapse-item
        v-for="(item, index) in state.list"
        :key="index"
        :title="item.className"
        :name="item.classId"
      >
        <view v-for="(e, i) in item.submissionList" :key="i" class="items-2">
          <view class="flex items-center">
            <wd-img :src="e.headshot || defaultUserAvatar" size="70rpx" class="border-rd-[100%]" />
            <view class="ml-12rpx view">
              <view class="text-[#3D3D3D] fw-700 text-24rpx mb-8rpx">{{ e.name }}</view>
              <text class="text-[#999999] text-20rpx">已交作业：{{ e.finishNum }}</text>
            </view>
          </view>
        </view>
      </wd-collapse-item>
    </wd-collapse>
  </view>
</template>

<script setup lang="ts">
/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'
/* 引入 图片 - 评论默认头像 */
import defaultUserAvatar from '@/static/images/comment/default_user.png'
/* 引入 接口 */
import { getEchartsDataApi, getDetailsApi } from '@/service/edu/analysis/index'

const finish = ref(0)
const finishRate = ref(0)
const unFinish = ref(0)
const unFinishRate = ref(0)
const total = ref(0)

/* 定义数据 */
const state = reactive({
  collapseValue: [],
  list: [],
  opts: {},
  chartData: {},
  animation: true,
  legendData: [
    {
      name: '已完成',
      show: true,
    },
    {
      name: '未完成',
      show: true,
    },
  ],
})

/* 获取 echarts 数据 */
async function getEchartsData(courseId: number | string) {
  /* 调取接口 */
  const res = await getEchartsDataApi({
    courseId,
  })
  finish.value = res.data.finish || 0
  finishRate.value = res.data.finishRate || 0
  unFinish.value = res.data.unFinish || 0
  unFinishRate.value = res.data.unFinishRate || 0
  total.value = res.data.total || 0
  /* 设置值 */
  const subtext = `${total.value}` || '0'
  state.opts = {
    padding: undefined,
    update: true,
    legend: {
      // 注意这里关闭了组件自带的图例
      show: false,
    },
    color: [
      '#1890FF',
      '#91CB74',
      '#FAC858',
      '#EE6666',
      '#73C0DE',
      '#3CA272',
      '#FC8452',
      '#9A60B4',
      '#ea7ccc',
    ],
    title: {
      name: '总计',
      color: '#666666',
      fontSize: 14,
      fontWeight: 500,
    },
    subtitle: {
      name: subtext,
      fontSize: 30,
      color: '#333333',
      fontWeight: 700,
    },
    extra: {
      arcbar: {
        type: 'circle',
        width: 12,
        backgroundColor: '#EDEFF2',
        startAngle: 1.5,
        endAngle: 0.25,
        gap: 2,
        linearType: 'custom',
      },
    },
  }
  state.chartData = JSON.parse(
    JSON.stringify({
      series: [
        {
          name: '总计',
          color: '#0D53FF',
          data: finishRate.value / 100,
        },
      ],
    }),
  )
}

/* 获取 折叠面板 数据 */
async function getDetails(courseId: number | string) {
  const res = await getDetailsApi({
    courseId,
  })
  state.list = res.data
}

/* 渲染图表 */
onLoad(async (query) => {
  if (query.courseId) {
    await getEchartsData(query.courseId)
    await getDetails(query.courseId)
  }
})
</script>

<style lang="scss" scoped>
/* 已完成 */
.completed,
.unfinished {
  padding: 30rpx 20rpx;
  margin: 30rpx 40rpx;
  background-color: #f7f7f7;

  :deep(.wd-progress),
  :deep(.wd-progress__outer) {
    height: 20rpx;
    border-radius: 20rpx;
  }
  :deep(.wd-progress__outer) {
    background-color: #edeff2;
  }
  :deep(.wd-progress__inner) {
    border-radius: 20rpx;
  }
}

.unfinished {
  :deep(.wd-progress__inner) {
    background-color: #d8d8d8 !important;
  }
}
/* 图例 */
.legend {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);

  .legend-item::before {
    display: inline-block;
    width: 22rpx;
    height: 22rpx;
    margin-right: 12rpx;
    clear: both;
    content: '';
    border-radius: 4rpx;
  }

  .legend-item:nth-child(1)::before {
    background: linear-gradient(90deg, #0d53ff 2%, #20a4ff 100%);
  }

  .legend-item:nth-child(2)::before {
    background: #edeff2;
  }

  .legend-item {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
    font-size: 24rpx;
    color: #6f6f6f;
  }

  .item-hide {
    color: #aaaaaa;
  }
}

:deep(.wd-collapse) {
  border-radius: 12rpx;
}

:deep(.wd-collapse-item__title) {
  font-size: 24rpx;
  font-weight: 700;
  color: #3d3d3d;
}

.items-2 {
  margin-bottom: 40rpx;
  .view {
    flex: 1;
    padding-bottom: 12rpx;
    border-bottom: solid 1rpx #e8e8e8;
  }
}

.items-2:nth-last-child(1) {
  margin-bottom: 0;
  .view {
    border-bottom: 0;
  }
}

:deep(.wd-img) {
  .wd-img__image {
    border-radius: 100%;
  }
}
</style>
